<template>
  <view class="min-h-screen bg-[#f8f9fb] p-4">
    <view class="flex justify-between items-center mb-4">
      <text class="text-xl font-bold">物业缴费</text>
    </view>

    <view
      v-for="(item, index) in list"
      :key="index"
      class="bg-white rounded-2xl shadow p-4 mb-4 flex justify-between items-center"
      @click="goDetail(item)"
    >
      <view>
        <text class="block text-base font-semibold">{{ house }}</text>
        <text class="block text-sm text-gray-500">{{
          item?.description || ''
        }}</text>
      </view>
      <view class="text-right">
        <text class="block text-lg font-bold text-red-500"
          >¥{{ item?.amount || 0 }}</text
        >
        <text
          :class="[
            'text-xs px-2 py-1 rounded-full',
            item.is_paid === 0
              ? 'bg-red-100 text-red-500'
              : 'bg-green-100 text-green-600'
          ]"
        >
          {{ !item.is_paid ? '待缴' : '已缴' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getPaymentList } from '@/api/payment'

const house = uni.getStorageSync('house_name').name

const list = ref<IPayment[]>([])

const goDetail = (item: IPayment) => {
  uni.navigateTo({
    url: '/pages/service/costInfo?id=' + item.id
  })
}

onShow(async () => {
  const res = await getPaymentList({
    houseId: uni.getStorageSync('houseId')
  })
  if (res.code === 200) {
    list.value = res.data.items || []
  }
})
</script>
